import React from "react";
import styles from '@/assets/css/coupon.module.css';

export default () => {

    let [page] = useState(1)
    let [list, SetList] = useState([])
    const [active, setActive] = useState('all')

    React.useEffect(() => {
        GetCouponData()
    }, [active])
    const TabChange = (key: string) => {
        setActive(key)
    }
    const GetCouponData = async () => {
        let params = {
            busid: React.business.id,
            page,
            active: active
        }

        // 发起请求
        let result = await React.request.post('/business/Coupon', params)

        console.log(result)
        SetList(result.data)
    }


    return (
        <>
            <React.UI.Tabs
                onChange={TabChange}
                activeKey={active}
                activeLineMode="full"
            >
                <React.UI.Tabs.Tab title="已领取" key="all" />
                <React.UI.Tabs.Tab title="已使用" key="1" />
                <React.UI.Tabs.Tab title="未使用" key="2" />
            </React.UI.Tabs>

            <div className={styles.coupon_list}>
                <React.UI.PullToRefresh>
                    {list && list.map((item: any) => (


                        <div className={styles.coupon_item} key={item.id}>
                            <Link to={`/coupon/info?cid=${item.id}`}>
                            <div className={styles.swipers}>
                                        <img src={item.coupon.thumb_text} alt=""  style={{ width: '100%' }} />
                                    </div>
                                <div className={styles.item_content}>
                                    <div className={styles.left}>
                                        {item.coupon.rate}<span>折</span>
                                    </div>
                                    <div className={styles.right}>
                                        <div>{item.coupon.title}</div>
                                        <div>订单满<span>100元</span>打<span>8折</span></div>
                                        <div>每人限领1张</div>
                                        <div>活动开始时间：{item.coupon.createtime_text}</div>
                                        <div>活动结束时间：{item.coupon.endtime_text}</div>
                                    </div>
                                </div>
                                <div className={styles.item_btn}>
                                    <button className={styles.right_btn}>已使用</button>
                                </div>
                            </Link>
                        </div>

                    ))}

                </React.UI.PullToRefresh >
            </div >
        </>
    )
}